import { memo , useEffect } from "react";
import HThemeHeader from "components/recommend-theme-header";
import HSongsCover from "components/songs-cover";
import {
  HotRecommendWrapped
} from "./style";
import { shallowEqual , useDispatch , useSelector } from "react-redux";
import { getHotRecommendsAction } from "../../store/actionCreators";

export default memo (
  function HHotRecommend () {
    const dispatch = useDispatch();

    const { hotRecommends } = useSelector( state => {
      return {
        hotRecommends : state.getIn(["recommend", "hotRecommends"])
      }
    },shallowEqual);

    useEffect(
      () => {
        dispatch(getHotRecommendsAction());
      },[dispatch]
    )
    useEffect(()=>{
      console.log(hotRecommends);
    },[hotRecommends])

    return (
      <HotRecommendWrapped>
        <HThemeHeader title={ "热门推荐" } keywords={ [ "华语" , "流行" , "摇滚" , "民谣" , "电子" ] }/>
        <div className="hot-content">
          <HSongsCover data={hotRecommends} Key={"id"} imgURL={"picUrl"} text={"name"} playCount={"playCount"} />
        </div>
      </HotRecommendWrapped>
    )
  }
)
